<template>
    <div class="statistics">
        <div class="content">
            <div class="stat-left">
                <div class="title">
                    <span>{{ monitorData.name }}</span>
                    <span>{{ `（${monitorData.year}-01-01至${monitorData.year}-12-31）`}}</span>
                </div>
                <ul>
                    <li>责任部门：{{ monitorData.orgName }} </li>
                    <li>责任人：{{ monitorData.realName }}</li>
                    <li v-if="monitorData.state == 1">当前状态：进行中</li>
                    <li v-else-if="monitorData.state == 2">当前状态：结案</li>
                    <li v-else>当前状态：未开始</li>
                </ul>
            </div>
            <div class="stat-right">
                <div class="total">
                    <ul class="title">
                        <li>
                            <span>{{ monitorInfo.total }}</span>
                            <p>质控点总数</p>
                        </li>
                        <li>
                            <span>{{ monitorInfo.reachTotal }}</span>
                            <p>已达标</p>
                        </li>
                        <li>
                            <span>{{ monitorInfo.finishTotal }}</span>
                            <p>已完成</p>
                        </li>
                        <li>
                            <span>{{ monitorInfo.warningTotal }}</span>
                            <p>预警中</p>
                        </li>
                    </ul>
                </div>

                <!-- 质控点完成情况饼图 -->
                <pointFinishChart :point-data="monitorInfo"></pointFinishChart>

                <el-button type="primary" plain @click="goBack"><< 返回</el-button>
            </div>
        </div>
        <!--<div class="step-box">-->
            <!--<step :active="3"></step>-->
            <!--<el-button type="primary" plain @click="goBack"><< 返回</el-button>-->
        <!--</div>-->
    </div>
</template>

<script>
    import step from '@/components/step/index'
    import pointFinishChart from '@/components/echarts/point-finish'
    import {getStorage} from "@/config/utils";

    export default {
        name: 'index',
        components: {
            step,
            pointFinishChart
        },
        props: {
            pointData: {
                type: Object
            },
            monitorInfo: {
                type: Object
            }
        },
        computed: {
            monitorData () {
                return getStorage('monitorData') || {}
            }
        },
        methods: {
            //返回上一级页面
            goBack () {
                this.$router.go(-1)
            }
        }
    }
</script>

<style lang="scss" scoped>
.statistics{
    .content{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        border: 1px solid $lineColor;
        ul{
            display: flex;
            align-items: center;
            text-align: center;
            li{
                margin-top: 10px;
                margin-right: 25px;
            }
        }
        .title{
            font-size: 16px;
            font-weight: 600;
            color: $blue;
        }
        .stat-right{
            display: flex;
            align-items: center;
        }
    }

    .step-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 20px;
        .el-steps{
            margin-top: 0 !important;
            /*width: 40%;*/
            min-width: 500px;
        }
    }
}
</style>